<template>
  <div class="data-process">
    <h3>数据预处理</h3>
    <el-form :model="form" label-width="120px">
      <el-form-item label="清洗规则">
        <el-select v-model="form.cleanRule" multiple placeholder="选择清洗规则">
          <el-option label="去除空值" value="removeNull"></el-option>
          <el-option label="去除重复值" value="removeDuplicate"></el-option>
          <el-option label="标准化格式" value="standardize"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="转换操作">
        <el-checkbox-group v-model="form.transforms">
          <el-checkbox label="归一化"></el-checkbox>
          <el-checkbox label="标准化"></el-checkbox>
          <el-checkbox label="离散化"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submit">执行预处理</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'

const form = reactive({
  cleanRule: [],
  transforms: []
})

const emit = defineEmits(['process-complete'])

const submit = () => {
  if (form.cleanRule.length === 0) {
    ElMessage.warning('请选择至少一个清洗规则')
    return
  }
  
  const loading = ElLoading.service({
    lock: true,
    text: '数据处理中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  
  // 模拟API调用
  setTimeout(() => {
    loading.close()
    ElMessage.success('数据预处理完成')
    emit('process-complete')
  }, 2000)
}
</script>

<style scoped>
.data-process {
  padding: 20px;
}
</style>